<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=custom-profit
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%;">
  <div id="container" style="height: 100%"></div>


  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    const colorList = [
      '#4f81bd',
      '#c0504d',
      '#9bbb59',
      '#604a7b',
      '#948a54',
      '#e46c0b'
    ];
    const data = [
      [101, 200, 1, 'A'],
      [555, 688, 1, 'B'],
      [788, 2000, 1, 'C'],
      [2222, 2788, 1, 'D'],
      [5000, 6888, 1, 'E'],
      [7555, 7888, 1, 'F']
    ].map(function (item, index) {
      return {
        value: item,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(245, 80, 71, 0.30)'
            },
            {
              offset: 1,
              color: 'rgb(245, 80, 71, 0.00)'
            }
          ])
        }
      };
    });
    const xData = []
    const lineData = [
      [388, 0, false],
      [1299, 0, false],
      [2000, 0, true],
      [4000, 0, false],
    ]
    for (let index = 0; index < 25 * 365; index++) {
      xData.push(index)
      // lineData.push(0)
    }
    option = {
      title: {
        text: 'Profit',
        left: 'center'
      },
      tooltip: {},
      grid: {
        height: 300
      },
      xAxis: {
        data: xData,
        scale: true,
        axisLine: {
          lineStyle: {
            color: "#246FE5",
            width: 2
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#626C78"
        }
      },
      dataZoom: [
        {
          type: 'slider',
          filterMode: 'filter',
          showDataShadow: false,
          bottom: 200,
          labelFormatter: ''
        },
        {
          type: 'inside',
          filterMode: 'weakFilter'
        }
      ],
      yAxis: [
        {
          type: 'category',
          data: ['正常', '故障']
        },
        {
          type: 'value',
          minInterval: 1,
          show: false
        }
      ],
      series: [
        {
          type: 'custom',
          renderItem: function (params, api) {
            var yValue = api.value(2);
            var start = api.coord([api.value(0), yValue]);
            var end = api.coord([api.value(1), yValue]);
            var size = api.size([api.value(1), yValue]);
            var polylineStyle = api.style({ stroke: 'red', lineWidth: 2 });
            var lineStyle = api.style({ stroke: '#8B949E', lineWidth: 2 });
            var x1 = api.coord([api.value(0), 0]);
            var x2 = api.coord([api.value(0), yValue]);
            var x3 = api.coord([api.value(1), yValue]);
            var x4 = api.coord([api.value(1), 0]);
            return {
              type: 'group',
              children: [
                {
                  type: 'polyline',
                  shape: {
                    points: [x1, x2, x3, x4],
                    smooth: 0
                  },
                  style: polylineStyle
                },
                {
                  type: 'line',
                  shape: {
                    x1: x1[0],
                    y1: x1[1],
                    x2: x4[0],
                    y2: x4[1],
                  },
                  style: lineStyle
                }

              ]
            };
          },
          dimensions: ['from', 'to', 'profit'],
          encode: {
            x: 0,
            y: 2,
            tooltip: [0, 1, 2],
          },
          data: data,
          yAxisIndex: 1
        },
        {
          type: 'custom',
          renderItem: function (params, api) {
            var iconLocation = api.value(2)
            console.log(iconLocation)
            var start = api.coord([api.value(0), api.value(1)]);
            var style = api.style({ stroke: '#246FE5', fill: '#FFF', lineWidth: 4 });
            if (iconLocation) {
              var imgStyle = api.style({ image: './location-icon.png', width: 32, height: 32 });
              return {
                type: 'image',
                x: start[0] - 30,
                y: start[1] - 30,
                style: imgStyle
              }
            } else {
              return {
                type: 'circle',
                shape: {
                  cx: start[0],
                  cy: start[1],
                  r: 6
                },
                style: style
              }
            }
          },
          data: lineData,
          yAxisIndex: 1
        }
      ]
    };
    myChart.on('click', function (params) {
      console.log(params);
    });
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>